<template>
  <div>
    <div>
      <div>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <div class="title_area">
                {{ jumparr[0].title }}
              </div>
              <el-table :data="jumparr" style="width: 100%">
                <el-table-column label="文章内容" prop="content">
                  <template v-slot="scope">
                    <div v-html="scope.row.content"></div>
                  </template>
                </el-table-column>
              </el-table>

              <el-table :data="jumparr" style="width: 100%">
                <el-table-column label="发布时间" prop="publishTime">
                  <template v-slot="scope">
                    <div>{{ scope.row.publishTime | dateFMT }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div></el-col
          >
        </el-row>
      </div>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <el-button @click="show_dialog">发布评论</el-button>

          <el-button @click="repeat_comment">回复</el-button>

          <div class="warning">Warning:用户所有的评论和回复都会暂存在当前页面，刷新后提交到后台等待审核，请耐心等待审核完毕再来查看。</div>

          <el-dialog title="发布评论" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="评论内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户名称" :label-width="formLabelWidth">
                <el-input v-model="form.user" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </div>
          </el-dialog>

          <el-dialog title="回复评论" :visible.sync="dialogFormVisible2">
            <el-form :model="form2">
              <el-form-item label="回复评论编号" :label-width="formLabelWidth">
                <el-input v-model="form2.id" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="回复内容" :label-width="formLabelWidth">
                <el-input v-model="form2.content" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户名称" :label-width="formLabelWidth">
                <el-input v-model="form2.user" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="save_repeat">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <el-table :data="arr" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="content" label="评论内容">
          </el-table-column>
          <el-table-column prop="user" label="用户" width="180">
          </el-table-column>
          <el-table-column prop="user_comment" label="最新回复用户" width="180">
          </el-table-column>
          <el-table-column prop="repeat" label="最新回复内容" width="300">
          </el-table-column>
        </el-table> 
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="obj.pageSize"
          :current-page="obj.page"
          @current-change="change"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<style>
.warning{
  font-size: 20px;
  color: red;
  text-align: center;
}
.title_area {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 31.6px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

<script>
import Qs from "qs";

import axios from "../../http/axios";

import moment from "moment";

import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      obj: {
        page: 1,
        pageSize: 5,
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form2: {},
      form: {},
      arr: [
        {
          id: 1,
          content: "确实",
          user: "秦大爷",
        },
        {
          id: 2,
          content: "祝安好",
          user: "组长",
        },
        {
          id: 3,
          content: "这文章前途无限",
          user: "某位不愿意透露姓名的大姐",
        },
        {
          id: 4,
          content: "我觉得还行",
          user: "模块人",
        },
        {
          id: 5,
          content: "这年头这种文章都能过审？",
          user: "网络警察一号",
        },
      ],
      formLabelWidth: "120px",
      customer: [],
      tableData: [],
      total: 0,
      jumparr: [JSON.parse(this.$route.query.art)],
    };
  },
  computed: {
    ...mapState("comment", ["comment"]),
  },
  created() {
    //this.findAllCommoent();
    this.page_query_comment();
  },
  watch: {
    obj: {
      handler: function () {
        this.page_query_comment();
      },
      deep: true,
    },
  },
  filters: {
    dateFMT(str) {
      // var res = moment(str).format('YYYY-MM-DD HH:mm:ss');
      // return res;
      return moment(str).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  methods: {
    ...mapActions("comment", [
      "findAllCommoent",
      "page_query_article",
      "saveOrUpdate",
    ]),
    show_dialog() {
      // 0. 修改模态框标题
      this.title = "发布文章";
      this.dialogFormVisible = true;
    },
    repeat_comment() {
      this.title = "回复评论";
      this.dialogFormVisible2 = true;
    },
    fmt(row, column) {
      return moment(row.publishTime).format("YYYY-MM-DD HH:mm:ss");
    },
    pulish_comment() {
      // 1. 显示模态框
      this.dialogFormVisible = true;
      // 2. 查询所有顾客
      axios({
        url: "http://http://39.102.37.84:8001/article/findAll",
        method: "get",
      }).then((res) => {
        this.customer = res.data.data;
      });
    },

    findAllCommoent() {
      axios({
        url: "http://39.102.37.84:8001/article/findAll",
        method: "get",
      }).then((res) => {
        this.tableData = res.data;
      });
    },
    save() {
      this.dialogFormVisible = false;
      this.form.id = this.arr.length + 1;
      this.arr.push(this.form);
      this.form = {};
    },
    save_repeat() {
      this.dialogFormVisible2 = false;
      for (this.item in this.arr) {
        if (this.form2.id == this.arr[this.item].id) {
          this.arr[this.item].repeat = this.form2.content;
          this.arr[this.item].user_comment = this.form2.user;
        }
      }
      this.arr = _.clone(this.arr)
      this.form2 = {};
    },
    page_query_comment() {
      axios({
        url: "http://39.102.37.84:8001/article/pageQuery",
        method: "get",
        params: this.obj,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.list;
      });
    },
    change(page) {
      this.obj.page = page;
    },
  },
};
</script>